<template>
	<view>
		<view class="search-container">
		    <!-- <input class="verification-code-input" placeholder="查找地址" v-model="tj1" @input="shuruChat"/> --><!--因为额度有限，所以用点击事件-->
			<input class="verification-code-input" placeholder="查找地址" v-model="tj1"/>
		    <icon type="search" @click="shuruChat"></icon>
			<icon class="iconfont icon-qinglihuancun" style="font-size:25px;" @click="qcjg"></icon>
		</view>
		<view v-if="tishi.length > 0" class="results-container" style="border: 1px dimgrey solid;">
			<view v-for="(item, index) in tishi" :key="index" class="result-item" @click="onResultClick(item,index+1)" :class="{ 'selected-item': currentSelectedIndex === index+1 }">  
				{{ item.title }}
			</view>  
		</view>
		<view class="fixed-button-row">
			<map id="myMap" class="maMap" subkey="{{key}}" :scale="dt.scale" show-location="true" :longitude="dt.jd" :latitude="dt.wd" />
		</view>
		<view class="fixed-button-row">
			<button @click="triggerLocation" style="width: 50%;" type="primary">标记到我</button>
			<button @click="qd" style="width: 50%;" type="primary">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key:'QXYBZ-ELWL4-24GUV-K6GFK-I2LVF-EDBTJ',
				tj1:'',
				tishi:[],
				dt:{
					scale:15,
					jd:121.505406,
					wd:31.233501,
				},
				qrjd:'',
				qrwd:'',
				currentSelectedIndex:null,
			}
		},
		methods: {
			sousuo(){
				console.log("cf")
			},
			triggerLocation() {
			    wx.authorize({  
			      scope: 'scope.userLocation',  
			      success: () => {
			        wx.getLocation({  
						type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
						success: (res) => {  
							this.dt.jd = res.longitude;  
							this.dt.wd = res.latitude;
							console.log(res);  
							this.qrjd=res.longitude
							this.qrwd=res.latitude
						},  
						fail: (err) => {  
							console.error('获取位置失败:', err);  
						}  
						});  
					},  
					fail: () => {  
						wx.showToast({  
							title: '请授权位置信息',  
							icon: 'none'  
						});  
					}  
			    });  
			},
			shuruChat(){
				wx.request({
					url: 'https://apis.map.qq.com/ws/place/v1/suggestion/',
					data: {
						key:this.key,
						keyword:this.tj1
					},
					method: 'GET',
					success: (res) => {
						this.tishi=res.data.data
						console.log(this.tishi)
					}
				})
			},
			qcjg(){
				this.tishi=[]
				this.triggerLocation()
			},
			onResultClick(item,index) {
				this.dt.wd=item.location.lat
				this.dt.jd=item.location.lng
				this.qrjd=item.location.lng
				this.qrwd=item.location.lat
				this.currentSelectedIndex = index;
				console.log(index)
			},
			qd(){
				console.log(this.qrjd+","+this.qrwd)
			}
		},
		onLaunch() {
			this.triggerLocation()
			console.log(this.dt)
		}
	}
</script>

<style>
	.maMap{
		height: 600px;
		width: 430px;
	}
	.fixed-button-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  justify-content: center; /* 水平居中 */ 
	  background-color: #fff;
	}
	.search-container {
	    display: flex; /* 使子元素在同一行显示 */
	    align-items: center; /* 垂直居中对齐 */
	}
	.verification-code-input {
	    border: 1px solid #ccc; /* 添加边框 */
	    padding: 5px; /* 内边距 */
		width: 90%;
	    margin-right: 5px; /* 右侧外边距，用于与图标分隔 */
	}
	  
	.verification-code-input {  
	  margin-bottom: 10px;  
	}  
	  
	.results-container {  
	  position: absolute; /* 绝对定位 */  
	  width: 100%; /* 或者根据需要设置宽度 */  
	  top: 50px; /* 假设输入框和图标的高度加起来大约是50px，根据实际情况调整 */  
	  left: 0;  
	  z-index: 10; /* 确保它浮在其他内容之上 */  
	  background-color: white; /* 可选，为了更好地看到结果 */  
	  border: 1px solid #ccc; /* 可选，添加边框 */  
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选，添加阴影 */  
	} 
	.selected-item {  
	  color: blue; /* 选中项的字体颜色 */  
	}  
</style>
